<template>
  <!--空间图片标签分析-->
  <!--解析用户图库中的标签,统计每个标签的关联图片数量.
  由于标签比较多,可以用 词云图 展示所有的标签,并突出常用标签,便于优化管理和图片搜索
  注意:
  Apache ECharts 默认不会引入词云图组件,需要手动引入 词云图 依赖
  词云图组件:https://github.com/ecomfe/echarts-wordcloud
  安装 依赖: npm install echarts-wordcloud
  使用:
  import 'echarts-wordcloud'
  -->
  <div class="space-tag-analyze">
    <a-card title="图库标签词云">
      <v-chart :option="options" style="height: 320px; max-width: 100%" :loading="loading" />
    </a-card>
  </div>
</template>

<script setup lang="ts">
import VChart from 'vue-echarts'
import 'echarts'
import 'echarts-wordcloud'
import { message } from 'ant-design-vue'
import { getSpaceTagAnalyzeUsingPost } from '@/api/spaceAnalyzeController.ts'
import { computed, ref, watchEffect } from 'vue'

interface Props {
  queryAll?: boolean
  queryPublic?: boolean
  spaceId?: string
}

const props = withDefaults(defineProps<Props>(), {
  queryAll: false,
  queryPublic: false,
})

// 图表数据
const dataList = ref<API.SpaceTagAnalyzeResponse[]>([])
const loading = ref(false)

/**
 * 加载数据
 */
const fetchData = async () => {
  // 这个条件判断会导致监听无法正常工作，导致多次快速调用API时出现问题。只在需要防止用户重复点击的时候才添加,否则不要添加
  // if (loading) return
  loading.value = true
  const res = await getSpaceTagAnalyzeUsingPost({
    queryAll: props.queryAll,
    queryPublic: props.queryPublic,
    spaceId: props.spaceId,
  })
  if (res.code === 0 && res.data) {
    dataList.value = res.data ?? []
  } else {
    message.error('获取数据失败，' + res.message)
  }
  loading.value = false
}
/**
 * 监听变量,改变时触发数据的重新加载
 * 为了让组件的属性变化时重新加载数据，需要使用watchEffect监听所有动态变量
 * watchEffect 会监听 fetchData() 当中所有的响应式变量，当其中的变量发生变化时，会重新执行 fetchData()
 */
watchEffect(() => {
  fetchData()
})
/**
 * 图表配置.
 * 注意:由于dataList是有一个加载过程的,所以需要使用computed计算属性来获取数据,始终根据dataList的值来计算
 */
const options = computed(() => {
  // 根据dataList生成tagData数组，每个元素包含name和value两个属性，
  // name对应item.tag即标签名称，value对应item.count即该标签出现的次数。
  const tagData = dataList.value.map((item) => ({
    name: item.tag, // 标签名称
    value: item.count, // 标签对应的数量值
  }))

  return {
    // tooltip配置，用于在鼠标悬停时显示提示信息
    tooltip: {
      trigger: 'item', // 触发类型为数据项，意味着当鼠标移到某一项上时触发提示框
      formatter: (params: any) => `${params.name}: ${params.value} 次`, // 自定义提示框内容格式
    },
    // series配置项，定义图表中每一个数据系列的具体内容。
    series: [
      {
        type: 'wordCloud', // 定义图表类型为词云图
        gridSize: 10, // 网格大小设置，数值越大，单词间的距离越大
        sizeRange: [12, 50], // 字体大小范围，最小12px，最大50px
        rotationRange: [-90, 90], // 旋转角度范围，从-90度到90度
        shape: 'circle', // 词云形状设置为圆形
        textStyle: {
          color: () =>
            `rgb(${Math.round(Math.random() * 255)}, ${Math.round(
              Math.random() * 255,
            )}, ${Math.round(Math.random() * 255)})`, // 随机颜色生成函数，确保每个单词有不同的颜色
        },
        data: tagData, // 数据源，使用前面定义的tagData
      },
    ],
  }
})
</script>

<style scoped></style>
